import React, { useEffect, useState, } from 'react';
import { LeftOutlined } from '@ant-design/icons';
import { getUser2Djm, putUserDjm } from '../../api/api';
import { Input } from 'antd';

export default function Nicheng() {
  const [user,setUser]  = useState({})
  const [val,setVal]  = useState('')
  const phone = sessionStorage.getItem('user')
  useEffect(()=>{
    getUser2Djm(phone).then(res=>setUser(res.data))
  },[])
  return (
    <div>
      <header style={{display:'flex',alignItems: 'center',justifyContent: 'space-between'}}>
        <LeftOutlined onClick={()=>{
          window.history.back()
        }}/>
        <h3>昵称</h3>
        <div style={{color:'#e98f36'}} onClick={()=>{
          putUserDjm({userName:val,id:user.id}).then(res=>console.log(res))
          window.history.back()
        }}>保存</div>
      </header>
      <div style={{width:'100%',height:'50px',display:'flex',alignItems: 'center',justifyContent: 'space-around',padding:'0 10px',boxSizing:'border-box'}}>
        <div style={{width:'56%'}}>昵称</div>
        <Input placeholder={user.userName} onChange={(e)=>{
          setVal(e.target.value)
        }} />
      </div>
    </div>
  )
}
